export default {
    props: {
        id: String | Number,
        site: Number
    },
    data() {
        return {
            index:5,
            name:'',
            content:'',
            contentShow:false,
            nameShow:false,
            commentList:[],
            hintShow:false,
            isLike: true,
            
        }
    },
    mounted() {
        this.getComment()
    },
    methods: {
        getCurrentTime() {
            const date = new Date();
            const year = date.getFullYear();
            const month = ("0" + (date.getMonth() + 1)).slice(-2);
            const day = ("0" + date.getDate()).slice(-2);
            const hours = ("0" + date.getHours()).slice(-2);
            const minutes = ("0" + date.getMinutes()).slice(-2);
            const seconds = ("0" + date.getSeconds()).slice(-2);

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        onStar(num) {
            this.index = num
        },
        getSrc(num, asd) {
            if (asd) {
                if (num <= asd) {
                    return 'https://www.thefunnymoney.com/imgs/solidStar.svg'
                } else {
                    return 'https://www.thefunnymoney.com/imgs/hollowStar.svg'
                }
            } else {
                if (num <= this.index) {
                    return 'https://www.thefunnymoney.com/imgs/solidStar.svg'
                } else {
                    return 'https://www.thefunnymoney.com/imgs/hollowStar.svg'
                }
            }
        },
        // 提交评论
        onSubmit() {
            if (this.content && this.name && this.content.length >= 8) {
                fetch('https://migame.vip/gamefront/websiteComment/addComment', {
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    method: 'post',
                    body: JSON.stringify({
                        //所属网站id
                        websiteId: this.site,
                        // 当前文章id
                        blogId: this.id,
                        userName: this.name,
                        content: this.content,
                        stars: this.index,
                        createTime: this.getCurrentTime()
                    })
                })
                    .then(res => res.json())
                    .then(res => {
                        this.getComment()
                        this.hintShow = true
                    }).finally(() => {
                        this.name = ''
                        this.content = ''
                    })
            } else {
                this.nameShow = true
                this.contentShow = true
            }
        },
        // 获取评论列表
        getComment() {
            fetch('https://migame.vip/gamefront/websiteComment/findCommentList', {
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                },
                method: 'post',
                body: JSON.stringify({
                    //所属网站id
                    websiteId: this.site,
                    // 当前文章id
                    blogId: this.id,
                })
            })
                .then(res => res.json())
                .then(res => {
                    this.commentList = res.data
                    this.commentList = this.commentList.map(item => {
                        item.Islike = false
                        item.Islikesed = false
                        item.likeSrc = 'https://www.thefunnymoney.com/imgs/likesed.png'
                        item.dislikeSrc = 'https://www.thefunnymoney.com/imgs/dislikesed.png'
                        return item
                    })

                }).finally(() => {

                })
        },
        handleBlur() {
            this.hintShow = false
            if (!this.name) {
                this.nameShow = true
            } else {
                this.nameShow = false
            }
            if (this.content.length < 8) {
                this.contentShow = true
            } else {
                this.contentShow = false
            }
        },
        authorLike(commentId, Lupvote, stepOn) {
            fetch('https://migame.vip/gamefront/websiteComment/updateUpvote', {
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                },
                method: 'post',
                body: JSON.stringify({
                    commentId: commentId,
                    websiteId: this.site,
                    blogId: this.id,
                    upvote: Lupvote,
                    stepOn: stepOn
                })
            })
                .then(res => res.json())
                .then(res => {
                    if (res.code == 0) {

                    }
                })
                .catch(err => {
                    throw new Error(err)
                })
        },
        updateLikeStatus(item, isLike) {
            if (isLike) {
                item.isLiked = !item.isLiked;
                this.authorLike(item.id, item.isLiked ? 1 : -1, 0);
                item.likeSrc = item.isLiked ? 'https://www.thefunnymoney.com/imgs/likes.png' : 'https://www.thefunnymoney.com/imgs/likesed.png';
                item.upvote += item.isLiked ? 1 : -1;
            } else {
                item.isDisliked = !item.isDisliked;
                this.authorLike(item.id, 0, item.isDisliked ? 1 : -1);
                item.dislikeSrc = item.isDisliked ? 'https://www.thefunnymoney.com/imgs/dislike.png' : 'https://www.thefunnymoney.com/imgs/dislikesed.png';
                item.stepOn += item.isDisliked ? 1 : -1;
            }
        },
    },
    template: `
    <div class="comment">
      <div class="comment-content">
        <div class="star">
          <img :src="getSrc(item)" alt="" v-for="(item,index) in 5" :key="index" @click="onStar(item)">
        </div>
        <div class="title">Please comment on this article</div>
        <div class="input-name">
          <span style="color: red; padding-right: 8px;">*</span>
          <input type="text" placeholder="Enter your name" v-model="name" @blur="handleBlur()" @input="handleBlur()">
          <p style="color: rgb(251, 72, 72);font-size: 12px;" v-if="nameShow">Please enter your nickname !</p>
        </div>
        <div class="input-content">
          <span style="color: red; padding-right: 8px;">*</span>
          <textarea name="comment" rows="4" placeholder="Please do not exceed 500 characters..." v-model="content"  @blur="handleBlur()" @input="handleBlur()"></textarea>
          <p style="color: rgb(251, 72, 72);font-size: 12px;" v-if="contentShow">Please enter your comment with at least 8 characters</p>
        </div>
        <div class="button">
          <button @click="onSubmit">Submit</button>
          <span style="color: #F8D746; font-size: 14px;" v-if="hintShow">Submission Succeeded!</span>
        </div>
        <div class="comment-record">
          <div class="item-all">
            <div class="item" v-for="(item,index) in commentList" :key="index">
              <div class="user-star">
                <div class="user-message">
                  By <span>{{item.userName}}</span> {{item.createTime}}
                </div>
                <div class="star">
                  <img :src="getSrc(item1,item.stars)" alt="" v-for="(item1,index1) in 5" :key="index1">
                </div>
              </div>
              <div class="user-comment">
                {{item.content}}
              </div>
              <div class="stamp">
                   <div class="like" @click="updateLikeStatus(item,isLike)">
                        <img style="width: 16px;" :src="item.likeSrc" alt="like">
                        <div style="color: #ffffff;">{{item.upvote}}</div>
                   </div>
                   <div class="dislike" @click="updateLikeStatus(item,!isLike)">
                        <img style="width: 16px;" :src="item.dislikeSrc" alt="dislike">
                        <div style="color: #ffffff;">{{item.stepOn}}</div>
                    </div>
               </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    `
}